<template>
  <div>
    <div class="profile">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL+userInfo.head_img"
        class="avatar"
        alt
      />
      <img v-else src="@/assets/logo.png" alt class="avatar" />
      <div class="info">
        <div class="name">
          <i
            class="iconfont"
            :class="{iconxingbienan:userInfo.gender==1,iconxingbienv:userInfo.gender==0
          }"
          ></i>
          {{userInfo.nickname}}
        </div>
        <div class="date" v-if="userInfo.create_date">{{userInfo.create_date.split("T")[0]}}</div>
      </div>
      <i class="iconfont iconjiantou1"></i>
    </div>
    <personalBar lebelText="我的关注" descText="关注的用户" @barClick="logPageName('我的关注')" />
    <personalBar lebelText="我的跟帖" descText="跟帖/回复" @barClick="logPageName('我的跟帖')" />
    <personalBar lebelText="我的收藏" descText="文章/视频" @barClick="logPageName('我的收藏')" />
    <personalBar lebelText="设置" @barClick="logedit" />
    <personalBar lebelText="退出" @barClick="logout" />
  </div>
</template>

<script>
import personalBar from "@/components/personalBar";
export default {
  components: {
    personalBar
  },
  data() {
    return {
      userInfo: {}
    };
  },
  methods: {
    logPageName(PageName) {
      // console.log(PageName);
    },
    logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$router.replace("/login");
    },
    logedit() {
      this.$router.replace("/edit");
    }
  },
  created() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId")
      // headers: {
      //   Authorization: "Bearer " + localStorage.getItem("token")
      // }
    }).then(res => {
      if (res.data.statusCode == 401) {
        this.$router.replace("/login");
        localStorage.removeItem("token");
        localStorage.removeItem("userId");
      }
      this.userInfo = res.data.data;
      // console.log(res.data.data);
    });
  }
};
</script>

<style lang="less" scoped>
.profile {
  display: flex;
  padding: 6.667vw;
  align-items: center;
  border-bottom: 1.111vw solid #e4e4e4;
  .avatar {
    width: 19.444vw;
    height: 19.444vw;
    object-fit: contain;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    font-size: 3.889vw;
    padding-left: 2.778vw;
    .name {
      color: #333;
      .iconxingbienan {
        color: #74b9ed;
      }
    }
    .date {
      color: #b4b4b4;
    }
  }
}
</style>